<template>
    <div id="orderList">
        <!-- 公共头部 -->
        <myHeader class="myHeader-bag" title="订单列表">
             <!-- 左侧按钮插槽 -->
            <template #left>
                <i class="back-icon" @click="backFn"></i>
            </template>

            <!-- 右侧按钮插槽 -->
            <template #right>
                <span class="more-icon"></span>
            </template>
        </myHeader>
        <!-- 导航 -->
        <nav class="orderList-nav">
            <van-tabs v-model="active">
                <van-tab title="全部" to="/orderList/allOrders"></van-tab>
                <van-tab title="待付款" to="/orderList/awaitPayment"></van-tab>
                <van-tab title="待发货" to="/orderList/awaitDeliver"></van-tab>
                <van-tab title="待收货" to="/orderList/awaitReceiving"></van-tab>
                <van-tab title="已完成" to="/orderList/orderFinish"></van-tab>
            </van-tabs>
        </nav>
        <!-- 显示区 -->
        <router-view></router-view>
        <!-- 底部信息 -->
        <div class="orderList-bottom">没有更多数据了</div>
    </div>
</template>

<script>
// 公共头部
import myHeader from '@/components/myHeader/myHeader'
export default {
    components:{
        myHeader
    },
    data() {
        return {
            active: 0,
        };
    },
    methods: {
        // 返回我的页面
        backFn(){
            this.$router.push("/my").catch(err => {});
        }
    },
        // 接收路由传参，改变导航样式活跃的目标
    mounted() {
        this.active = this.$route.params.index
    },
}
</script>

<style lang="less" scoped>
#orderList{
    background-color: #f3f3f3;
    height: 100%;
    // 公共头部
    .myHeader-bag{
        background-color: #ffffff;
        .back-icon {
            display: block;
            background: url("../../../../static/images/shoppingCart/back-icon.png") no-repeat 0 0;
            background-size: contain;
            width: 57px;
            height: 21px;
        }
        .more-icon {
            display: block;
            background: url("../../../../static/images/shoppingCart/more-icon.png") no-repeat 0 0;
            background-size: contain;
            width: 57px;
            height: 21px;
        }
    }
    // 列表导航
    .orderList-nav{
        width: 100%;
        height: 87px;
        line-height: 87px;
        background-color: pink;
        border-top: 1px solid #f3f3f3;
        a{
            color: #000000;
        }
    }
    // 列表底部
    .orderList-bottom{
        font-size: 26px;
        text-align: center;
        margin-top: 56px;
        color: #c6c6c6;
    }
}
</style>
